<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>将一个对象的所有属性作为prop传入</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		#app {
			padding: 50px;
		}
	</style>
</head>
<body>
	<div id="app">
		<component-a v-bind="student"></component-a>
	</div>
	<script src="../lib/vue.3.4.js"></script>
	<script>
		const componentA = {
			template: `
				<p>姓名：{{name}}</p>
				<p>年龄：{{age}}</p>
				<p>学校：{{school}}</p>
			`,
			props: {
				name: String,
				age: Number,
				school: String
			}
		}


		var app = Vue.createApp({
			components: {
				'component-a': componentA
			},
			data () {
				return {
					student: {
						name: '王小明',
						age: 18,
						school: '重庆研究精神病大学'
					}
				}
			},
		})
		app.mount('#app');

	</script>
</body>	
</html>